<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>5成绩查询-个人成绩-最新考试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{position: relative; height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{/*position: relative; */ height: 50px; top:0; background:#fff; }
.g-back{ position: absolute;left: 0;top:0; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{position: absolute;right: 0;top:0; width: 80px; height: 50px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*选择项*/
.page-wrap{ padding-top:10px;  height: 100%; width: 100%; background:#f8f8f8;     overflow-y: auto; }
.listWrap{ margin:10px 0; overflow: hidden; }
.listSelect{ display: block;height: 50px; width: 100%; background:#fff; }
.listSelecValue{ float: left; margin-left: 15px; height: 50px;   line-height: 50px; font-size:15px;  color: #2f2f2f; }
.listSelectBtn{float:right; padding-right: 17px; margin-right: 15px; height: 50px;   line-height: 50px; font-size:15px; color: #d1d1d1; }
.listItems{ display: none; height: 200px; overflow:auto; }
.listItems a{ display: block; padding-left: 15px; height: 40px; line-height: 40px; font-size: 15px;color: #2f2f2f;  }
/*单科成绩*/
.dan-ke{table-layout:fixed; border-collapse: collapse; border:2px solid #f8f8f8; margin-bottom: 25px; width: 100%; height: 150px;background: #fff; }
.dan-ke span{  display:block; text-align: center;   }
.dan-ke .text{ font-size: 13px;  color: #666; }
.dan-ke .title{ height: 50%;line-height: 38px;   font-size: 15px;  color: #666;  }
.dan-ke .num{height: 50%;line-height: 38px;   font-size: 20px;  color: #ecab1b;   }
 /*各科成绩信息*/
.cj-lists{ margin-bottom: 10px; overflow: hidden;  padding:0 15px; background: #fff;  }
.cj-lists li{  height: 60px;width: 100%;  border-bottom: 1px solid #f3f4f9; overflow:hidden; }
.cj-lists li img{ float: left; margin:16px 0 ; height: 30px;width: 30px; border-radius: 50%;   }
.cj-lists li span{ overflow: hidden;  float: left; height: 60px; line-height: 60px;    margin-left: 2px;  }
.cj-lists .title{  padding:0 5px; font-size: 15px;  }
.cj-lists .fen{  padding:0 5px; font-size: 10px; color: #666; }
.cj-lists .fen-num{  font-size: 15px; }
.cj-lists .mfen{  padding:0 5px 0 10px;  font-size: 10px; color: #666; }
.cj-lists .mfen-num{ font-size: 15px; }
.cj-lists .botn{  float: right; height: 10%; width: 25px; height: 60px;  }
/*教师评语*/
.js-pingyu{ padding:0 30px 25px 30px; width: 100%; background: #fff;  }  
.js-pingyu h4{ width: 100%; height: 50px; line-height: 50px; font-size: 15px; }  
.js-pingyu h4 span{ color: #666; }  
.pingyu-lists{ height: 400px; overflow: hidden; }  
.pingyu-lists li{ margin-bottom: 25px; overflow: hidden;  }  
.lists-head{ float: left; margin-left: 5%;  width: 90%; height: 118px;   overflow: hidden; background: #fff;  }
.lists-head img{float: left;  height:100px;  margin:9px 15px; border-radius: 50%;}
.lists-head .name{ margin-top: 25px; display: block; font-size: 18px; }
.lists-head .zhiwu,.lists-head .other{ display: block; font-size: 13px; color: #666; }
.border{ margin-top:50px;  border: 1px solid #ccc;  }
.border .text{padding: 0 32px; margin: 72px auto; min-height: 1px; margin-bottom: 20px;  font-size: 13px; line-height: 25px;  color: #666; }
.show-btn{ height: 30px; line-height: 30px; text-align: center; }
.show-btn a{ font-size: 15px; color: #0f9fe9; }
/*底部按钮*/
.bot-btns{width: 100%; height: 70px;  }
.bot-btns .weui-flex__item{  padding:5%; }
.bot-btns a{display: block; width: 100%;height: 38px;line-height: 38px;text-align: center;font-size: 15px;color: #fff;border-radius: 3px;}
.bot-btns .cj-jilu{background: #3396fb; }
.bot-btns .cj-zong{background: #57c526; }
/*箭头图标*/
.g-left{ background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{ background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px; }
.g-up{ background:url(../img/up_03.png) right center no-repeat; background-size: 13px 7px; }
</style>
</head>
<body>
<div class="page-container">
      <div class="weui-tab">
             <!-- 头部 -->
            <div class="weui-navbar page-top">
                      <a  href="javascript:history.back(-1);" class="g-back"></a>
                      <span class="t-title">班级总成绩排名</span>  
                      <a  class="g-other"></a>
            </div>
             <!-- 内容区 -->
            <div class="weui-tab__bd page-wrap" >
                     <div class="listWrap">
                           <a class="listSelect" href="###">
                                 <span class="listSelecValue">2018年01月月考</span>
                                 <span class="listSelectBtn g-up">请选择</span>
                           </a>
                           <ul class="listItems">
                                 <li><a href="###">2018年01月月考</a></li>
                                 <li><a href="###">2018年02月月考</a></li>
                                 <li><a href="###">2018年03月月考</a></li>
                                 <li><a href="###">2018年04月月考</a></li>
                                 <li><a href="###">2018年05月月考</a></li>
                                 <li><a href="###">2018年06月月考</a></li>
                           </ul>
                    </div>
                    <!-- 单科成绩展示 -->
                    <table class="dan-ke" border="1">
                           <tr>
                             <td><span class="title" style="color:#000;">范萌萌</span><!-- <span class="text">范萌萌</span> --></td>
                             <td><span class="num">480</span><span class="text">班级最高分</span></td>
                             <td><span class="num">360</span><span class="text">班级平均分</span></td>
                           </tr>
                           <tr>
                             <td><span class="num">460</span><span class="text">得分</span></td>
                             <td><span class="num">3</span><span class="text">班级排名</span></td>
                             <td><span class="num">18</span><span class="text">年级排名</span></td>
                           </tr>
                    </table>
              <!-- 各科成绩信息 -->                                       
                     <ul class="cj-lists" id="cj-lists">
                            <li>
                                  <div  class="left">
                                         <img src="../img/yuwen.png">
                                         <span class="title">语文</span>                                   
                                  </div>
                                  <div class="right">
                                        <span class="fen">分数:</span>
                                        <span class="fen-num">80</span>                                                               
                                        <span class="mfen">班级最高分:</span>
                                        <span class="mfen-num">120</span>
                                        <a href="###" class="botn g-left"></a>                                   
                                  </div>
                            </li>
                     </ul>
             <!-- 教师评语 -->
                     <div class="js-pingyu">
                            <h4>老师评语<span>(5)</span></h4>
                            <ul  class="pingyu-lists">
                                   <li>
                                         <div class="weui-flex lists-head">   
                                                <div class="weui-flex__item">
                                                       <img src="../img/liu_03.jpg" >
                                                </div>

                                                <div class="weui-flex__item">
                                                        <div>
                                                              <span class="name">李剑锋</span>
                                                              <span class="zhiwu">班主任</span>
                                                              <span class="other">兼语文老师</span>
                                                        </div>  
                                                </div>                                                            
                                         </div> 

                                         <div class="border">
                                               <p class="text">此孩子天赋极佳,是练舞的好苗子,将来的栋梁之才, 小伙子好好努力 </p>       
                                         </div>                                
                                   </li>

                                   <li>
                                         <div class="weui-flex lists-head">   
                                                <div class="weui-flex__item">
                                                       <img src="../img/li_03.jpg" >
                                                </div>

                                                <div class="weui-flex__item">
                                                        <div>
                                                              <span class="name">李剑锋</span>
                                                              <span class="zhiwu">班主任</span>
                                                              <span class="other">兼语文老师</span>
                                                        </div>  
                                                </div>                                                            
                                         </div> 

                                         <div class="border">
                                               <p class="text">此孩子天赋极佳,是练舞的好苗子,将来的栋梁之才, 小伙子好好努力 </p>       
                                         </div>                                
                                   </li>
                                   <li>
                                         <div class="weui-flex lists-head">   
                                                <div class="weui-flex__item">
                                                       <img src="../img/li_03.jpg" >
                                                </div>

                                                <div class="weui-flex__item">
                                                        <div>
                                                              <span class="name">李剑锋</span>
                                                              <span class="zhiwu">班主任</span>
                                                              <span class="other">兼语文老师</span>
                                                        </div>  
                                                </div>                                                            
                                         </div> 

                                         <div class="border">
                                               <p class="text">此孩子天赋极佳,是练舞的好苗子,将来的栋梁之才, 小伙子好好努力 </p>       
                                         </div>                                
                                   </li>
                            </ul>
                            <div class="show-btn">
                                   <a id="showAll" dtr="0">显示全部</a>
                            </div>
                     </div>

                <!-- 按钮 -->
                    <div class="weui-flex bot-btns">
                            <div class="weui-flex__item"><a href="cheng6.html" class="cj-jilu">成绩记录</a></div>
                            <div class="weui-flex__item"><a href="cheng3.html" class="cj-zong">班级排名</a></div>
                    </div>
      	 </div>
</div>
</body>
<script>
 (function(){
        // 个人成绩各科信息数据列表
        var arr = [
              { title:"语文", src:"../img/yuwen.png" , num1:80, num2:120 , href:"cheng4.html" },
              { title:"数学", src:"../img/shuxue.png" , num1:85, num2:120 , href:"cheng4.html" },
              { title:"英语", src:"../img/yinyu.png" , num1:80, num2:120, href:"cheng4.html"  },
              { title:"政治", src:"../img/zhengzhi.png" , num1:81, num2:120, href:"cheng4.html"  },
              { title:"物理", src:"../img/wuli.png" , num1:82, num2:120, href:"cheng4.html"  },
              { title:"历史", src:"../img/lishi.png" , num1:80, num2:120 , href:"cheng4.html" }
        ]
        var strarr = [];
        $.each(arr, function(i,v){
              strarr.push(
                     '<li>'+
                          '<div  class="left">'+
                                 '<img src="'+v.src+'">'+
                                 '<span class="title">'+v.title+'</span> '+                                  
                          '</div>'+
                          '<div class="right">'+
                                '<span class="fen">分数:</span>'+
                                '<span class="fen-num">'+v.num1+'</span> '+                                                              
                                '<span class="mfen">班级最高分:</span>'+
                                '<span class="mfen-num">'+v.num2+'</span>'+
                                '<a href="'+v.href+'" class="botn g-left"></a>'+                                   
                          '</div>'+
                   '</li>'
              )
        })
        $("#cj-lists").html( strarr.join(""));

  // 选择项点击下拉效果
       $(".listSelectBtn").click(function(){
                if( $(this).hasClass("g-up")){
                       $(this).removeClass("g-up").addClass("g-down");
                       $(this).parent().next("ul").slideDown();
                }else{
                      $(this).removeClass("g-down").addClass("g-up");
                       $(this).parent().next("ul").slideUp();
                }
       });
       $(".listItems").find("a").click(function(){
              $(this).parent().parent().prev("a").find(".listSelecValue").text( $(this).text() );
              $(this).parent().parent().prev("a").find(".listSelectBtn").removeClass("g-down").addClass("g-up");
              $(this).parent().parent().hide();
       })
  // 单科历次成绩和单科排名切换
      $(".chengjiNav").find("button").click(function(){
            if( !$(this).hasClass("active")){
                  $(".chengjiNav").find("button").removeClass("active");
                  $(this).addClass("active");
                  $(".liciCJ,.cj-table").hide();
                  $($(this).attr("dta")).show();
            }
      })

    $("#showAll").click(function(){
            if( $(this).text() == "显示全部"){
                 $(this).parent().prev().height("auto");
                 $(this).text("收起");
            }else{
                $(this).parent().prev().height(400);
                $(this).text("显示全部");
            }        
    })

 })()


</script>
</html>